import React from 'react';
import gql from 'graphql-tag';
import {connect} from 'react-apollo';
import {
    Row, Col, Spin,
    Button, Icon,
    message
} from 'antd';
import Base from '../../base';
import Connection from './connection';
import Editor from './editor';

const mapMutationsToProps = () => ({
    createConnection: (args) => ({
        mutation: gql`
            mutation create($connection: ConnectionInput) {
                createConnection(connection: $connection) {
                    name, host, port, username, password
                }
            }
        `,
        variables: {
            connection: args.connection
        }
    }),
    modifyConnection: (args) => ({
        mutation: gql`
            mutation modify($name: String!, $connection: ConnectionInput) {
                modifyConnection(name: $name, connection: $connection) {
                    name, host, port, username, password
                }
            }
        `,
        variables: {
            name: args.name,
            connection: args.connection
        }
    })
});

@connect({mapMutationsToProps})
export default class Index extends Base {
    state = {
        busy: false,
        showEditor: false,
        connection: null
    };

    onCreate() {
        this.setState({
            showEditor: true,
            connection: null
        });
    }

    onModify(connection) {
        this.setState({
            showEditor: true,
            connection,
            // 因为允许改名，需要把原名称记下来
            name: connection.name
        });
    }

    onOk(data) {
        this.setState({
            showEditor: false,
            busy: true
        });
        const {
            createConnection,
            modifyConnection
        } = this.props.mutations;
        if (this.state.connection) {
            this.doMutation(modifyConnection, data, this.state.name);
        } else {
            this.doMutation(createConnection, data);
        }
    }

    doMutation(createOrModify, connection, name) {
        createOrModify({connection, name}).then(({errors}) => {
            if (errors) {
                message.error(errors[0].message);
            } else {
                this.reload();
            }
            this.setState({busy: false});
        });
    }

    render() {
        return (
            <div className="container">
                <Row className="margin-bottom fixed">
                    <Col span="12">
                        <Button type="green" onClick={this.onCreate.bind(this)}>
                            <Icon type="plus"/> 添加
                        </Button>
                    </Col>
                    <Col span="12" className="right">
                        <Button
                            type="blue" loading={this.state.busy}
                            onClick={() => {this.reload();}}
                        >
                            <Icon type="reload"/> 刷新
                        </Button>
                    </Col>
                </Row>
                <Spin spinning={this.state.busy}>
                    <Connection
                        onModify={this.onModify.bind(this)}
                        setReload={reload => {this.reload = reload;}}
                    />
                </Spin>
                <Editor
                    visible={this.state.showEditor}
                    data={this.state.connection}
                    onOk={this.onOk.bind(this)}
                    onCancel={() => {this.setState({showEditor: false});}}
                />
            </div>
        );
    }
}
